<template>
    <div class="yuyue" v-if="this.freeCleaningData">
        <i @click="goBack" class="el-icon-arrow-left"></i>
        <div class="yuh3" style="font-size:24px !important;">预约免费保洁</div>
        <div class="yuyue-list">
            <div class="xuanze xuanze1">
                <span>预约时间</span>
                <div class="yy-datatime">
                    <mt-button @click.native="openPicker">{{ dateTime }}</mt-button>
                    <mt-datetime-picker
                        ref="picker"
                        type="datetime"
                        @confirm="handleConfirm"
                        :startDate="startDate"
                        year-format="{value} 年"
                        month-format="{value} 月"
                        date-format="{value} 日"
                        hour-format="{value} 时"
                        minute-format="{value} 分">
                    </mt-datetime-picker>
                </div>
            </div>

            <div class="xuanze xuanze2">
                <span>选择项目</span>
                <el-select v-model="proValue" placeholder="请 选 择">
                    <el-option
                        v-for="proItem in this.optionsItems"
                        :key="proItem.name"
                        :label="proItem.name"
                        :value="proItem.itemId">
                    </el-option>
                </el-select>
            </div>
            <div class="xuanze xuanze3">
                <span>联系方式</span>
                <div class="address" @click="addadd">
                    <div>
                        <p>{{ myAddress.name }}  {{ myAddress.phone }}</p>
                        <p>{{ myAddress.address }}</p>
                    </div>
                    <i></i>
                </div>
            </div>

            <!-- 地址组件 -->
            <mt-popup class="dizhicomponent" v-model="popupVisible" position="right" :modal="false">
                <MyAddress @closePop="closePop" @checkChoose="checkChoose" ></MyAddress>
            </mt-popup>



            <div class="xuanze xuanze4">
                <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="我要留言"
                    v-model="textarea">
                </el-input>
            </div>
        </div>
        <p class="yy-notice">*预约成功后客服三十分钟内给您安排并向您回电确认.</p>
        <button class="yy-btn" @click="handleClick">开始预约</button>



        


    </div>
</template>


<script>
import { MessageBox } from 'mint-ui';
import { DatetimePicker} from 'mint-ui'
import moment from 'moment'
import Vue from 'vue'
Vue.component(DatetimePicker.name, DatetimePicker)

import MyAddress from '@/components/Myaddress.vue'

import {mapState,mapActions} from 'vuex'
export default {
    created(){
        this.getFreeCleaningData();
    },
    components:{
        MyAddress
    },
  data () {
    return {
        myAddress: {},
        popupVisible: false,
        proValue: '',
        textarea: '',
        dateTime: '',
        startDate: new Date()
    }
  },
  computed:{
      ...mapState({
          freeCleaningData:state => state.baojieModules.freeCleaningData,
          orderData:state =>state.baojieModules.orderData
      }),
      optionsItems(){
          return this.freeCleaningData ? this.freeCleaningData.cmItems :  [];   
      }      
  },
  mounted(){
      this.$alert('<p>该免费保洁服务范围是对家庭/政企的居住房内或办公室、走廊、卫生间等的日常打扫，不含室外和深度保洁.</p>', '免费保洁服务须知', {
          dangerouslyUseHTMLString: true
        });
  },
  methods: {
    ...mapActions({
        getFreeCleaningData:'baojieModules/getFreeCleaningData',
        cleanOrderSubmit:'baojieModules/cleanOrderSubmit'
    }),
    checkChoose(data){
        this.myAddress.name = data.userName;
        this.myAddress.phone = data.mobileNo;
        this.myAddress.address = data.address;
        this.myAddress.addressId = data.addressId;
        this.popupVisible = false;
    },
    closePop(){
        this.popupVisible = false;
    },
    openPicker () {
      this.$refs.picker.open()
    },
    handleConfirm (data) {
      var date = moment(data).format('YYYY/MM/DD HH:mm')
      this.dateTime = date
    },
    handleClick() {
        let params = {
                scheduledTime:this.dateTime,
                itemId:this.proValue,
                note:this.textarea,
                orderType:0,
                addressId:this.myAddress.addressId
            }
        if(params.scheduledTime == ''){MessageBox('提示','请选择预约时间');return;}
        if(params.itemId == ''){MessageBox('提示','请选择项目');return;}
        if(!params.addressId){MessageBox('提示','请选择联系方式');return;}
        this.cleanOrderSubmit(params); 
    },
    addadd(){
        this.popupVisible = true
    },
    goBack(){
        this.$router.go(-1);
    }
    
  },
}
</script>

<style lang="scss">
@import "../../assets/style/bjfw.scss";
.el-input__inner,.el-textarea__inner {
    border: none !important;
}
.el-select .el-input .el-select__caret{
    color: #000 !important;
}
.mint-datetime-action{
    color: #26a2ff !important;
}
.mint-button::after{
    background: #fff !important;
}
.el-input__suffix-inner{
    text-align: right !important;
}
.yy-datatime .picker-item{
    font-size: 14px !important;
}

</style>


<style lang="scss">
.el-message-box{
    width: 90% !important;
}
.el-message-box__title{
    font-size: 16px !important;
}
.el-icon-arrow-left{
        position: fixed;
    top: 10px;
    color: white;
    z-index: 9999;
    background-color: #888;
    border-radius: 50%;
    font-size: 25px;
    left: 10px;
}
</style>


